<template>
  <div v-if="subMenus.length>0">
    <el-dropdown
      teleported
      class="menu-item"
      popper-class="sub-menu"
    >
      <span
        v-if="imgNumber>0"
        class="icon-number"
      >{{ imgNumber }}</span>
      <img :src="imgUrl">
      <template #dropdown>
        <div
          v-if="topMessage.length>0"
          class="menu-item-top-msg"
        >
          <span>{{ topMessage }}</span>
        </div>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="item in subMenus"
            :key="item.key"
            @click="subMenuItemClick(item)"
          >
            <div
              v-if="!subMenuIsButton"
              class="sub-menu-item"
            >
              <i
                class="custom-icon"
                :style="{ background: 'url('+item.icon+')' }"
              /> {{ $t(item.name) }}
            </div>
            <div
              v-else
              class="sub-menu-item sub-menu-button"
            >
              <button :style="{ backgroundColor: item.btnColor }">
                {{ $t(item.name) }}
                <img
                  v-if="item.icon"
                  :src="item.icon"
                >
              </button>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <div
    v-else
    class="menu-item"
  >
    <span
      v-if="imgNumber>0"
      class="icon-number"
    >{{ imgNumber }}</span>
    <img :src="imgUrl">
  </div>
</template>

<script setup>
import {defineComponent} from "vue";
import img_menu from '@/assets/images/ui/header/menu.png'

defineComponent({
  name: 'TopMenu'
})

// eslint-disable-next-line no-unused-vars
const props = defineProps({
    imgUrl: {
      type: String,
      default: img_menu,
    },
    subMenus: {
      type: Array,
      default: ()=>[],
      validator: (value) => {
        return value.every((item) => {
          return (
              typeof item === 'object' &&
              item !== null &&
              typeof item.name === 'string' &&
              typeof item.icon === 'string'&&
                  typeof item.key === 'string'
          )
        })
      }
    },
    imgNumber: {
      type: [Number,String],
      default: 0,
    },
    topMessage: {
      type: String,
      default: '',
    },
    subMenuIsButton: {
      type: Boolean,
      default: false,
    }
});


const emits = defineEmits(['menuItemClick'])

const subMenuItemClick = (item)=>{
    emits('menuItemClick',item);
};
</script>

<style scoped lang="scss">
.menu-item {
  position: relative;
  display: inline-block;
  img {
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
  img:focus {
    outline: none !important;
  }
  .icon-number {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #a30014;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 13px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.sub-menu {
  .sub-menu-item {
    display: flex;
    align-items: center;
    min-width: 180px;
    padding: 5px 5px 10px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
  }
  .sub-menu-button {
    justify-content: center;

    button {
      width: 140px;
      height: 40px;
      color: white;
      cursor: pointer;

      outline: none !important;
      border: none !important;
      border-radius: 40px;

      position: relative;

      img{
        position: absolute;
        right: -24px;
        top: -24px;

        width:48px;
        height: 48px;
      }
    }
  }
}

.custom-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.menu-item-top-msg {
  font-weight: 700;
  font-size: 14px;
  margin-left: 25px;
  margin-bottom: -5px;
}

</style>